<template>
    <div>
      <header-tilte :title="title"></header-tilte>
      <div class="flex_center">
        <div class="bodyContent">
          <p class="warnning">
            <i class="fa fa-bell-o"></i>
            他人微信扫二维码，可共享电子水票下单
          </p>
          <div class="qrcode_content flex flex_column flex_vertical_center">
            <div id="qrcode"></div>
            <p style="margin-top: 2rem">{{time}}</p>
            <p v-if="url != undefined && url != null && url != ''">变更二维码，之前生成的二维码将失效</p>
            <p v-if="url == undefined || url == null || url == ''">您暂无二维码，请点击生成</p>
          </div>
        </div>
      </div>

      <div class="waterBillShare" @click="initQrcode(1)">
        <mu-button color="primary" v-if="url == undefined || url == null || url == ''" >生成水票共享二维码</mu-button>
        <mu-button color="primary" v-if="url != undefined && url != null && url != ''">变更水票共享二维码</mu-button>
      </div>
    </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import QRCode from 'qrcodejs2';
    export default {
      data(){
        return{
          title:'水票共享',
          url:'',
          text:'您暂无二维码，请点击生成',
          time:'',
          button_text:'',
          qrUrlKey:''
        }
      },
      mounted(){
        this.checkLogin();
        var login = this.getCache('login_key');
        var mid = login.mid;
        this.qrUrlKey = mid+'_'+this.sid;
        //判断缓存里是否有该二维码 若有则
        if(!this.isEmpty(this.getCache(this.qrUrlKey))){
          this.url = this.getCache(this.qrUrlKey);
          this.time = this.GetUrlString(this.url,'qrTime');
          this.qrcode();
        }else {
          this.initQrcode(0);
        }
      },
      methods: {
        initQrcode(type){
          this.yesS.getShareQrCode(
            this.$combineParams({type:type})
          ).then(res => {
            this.url = res.data.url;
            this.setCache(this.qrUrlKey,this.url);
            this.time = this.GetUrlString(this.url,'qrTime');
            console.log(this.url)
            console.log(this.time)
            this.qrcode();
          })
        },

        qrcode() {
          $('#qrcode').html('');
          let qrcode = new QRCode('qrcode', {
            text: this.url, // 二维码内容
            image: ''
          })
        },
      },
      components: {HeaderTilte},
      name: "water_share"
    }
</script>

<style scoped>
  @import "css/waterBillShare.css";
</style>
